// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Switch,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { notification } from 'antd/lib/index';
import UserDetail from './UserDetail';

// css OR less预编译器
// import styles from './User/UserList.less';

// 图片

/**
 *  Created by xjc on 2019/5/15
 *  Describe:数据连接
 */

@connect(({ authority, loading }) => ({
  authority,
  loading: loading.models.AuthorityRule,
}))
@Form.create()
class UserList extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    selectedRows: [], // 选择行
    formValues: {
      num: 10,
      page: 1,
    }, // 表格参数
    UserDetailVisible: false, // 权限添加modal
    record: [], // record
    roles: [], // 权限list
  };

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:改变每页条数和当前页
   */

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    this.setState(
      {
        formValues: {
          num: pagination.pageSize,
          page: pagination.current,
        }, // 表格参数
      },
      () => {
        /* 导入列表数据 */
        dispatch({
          type: 'authority/GetUserList',
          payload: {
            num: pagination.pageSize,
            page: pagination.current,
          },
        });
      }
    );
  };

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:表头
   */

  columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '用户名称',
      dataIndex: 'loginname',
    },
    {
      title: '拥有角色名称',
      dataIndex: 'roles',
    },
    {
      title: '添加时间',
      dataIndex: 'addtime',
    },
    {
      title: '修改时间',
      dataIndex: 'updatetime',
    },
    {
      title: '状态',
      dataIndex: 'enable',
      render: (text, record) => (
        <Switch
          checkedChildren="可用"
          unCheckedChildren="锁定"
          checked={text === 1}
          onClick={this.changeSwitch.bind(this, record.id)}
          disabled={text !== 1}
        />
      ),
    },
    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <span>
            <a onClick={this.UserdDistribute.bind(this, record)}>分配角色</a>
          </span>
        </Fragment>
      ),
    },
  ];

  /**
   *  Created by xjc on 2019/5/20
   *  Describe:修改状态，分配角色
   */

  changeSwitch(id, checked, event) {
    const that = this;
    const key = `open${Date.now()}`;
    const { formValues } = that.state;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          const { dispatch } = that.props;
          dispatch({
            type: 'authority/FreezeUserList',
            payload: {
              id,
            },
            callback: res => {
              if (res.code === 1) {
                message.success(res.message);
              } else {
                message.warning(res.message);
              }

              /* 导入列表数据 */
              dispatch({
                type: 'authority/GetUserList',
                payload: formValues,
              });
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否置为不可用',
      btn,
      key,
      onClose: close,
    });
  }

  UserdDistribute(record) {
    const { dispatch } = this.props;
    dispatch({
      type: 'authority/GetAuthorityList',
      payload: {
        num: 1000,
        page: 1,
      },
      callback: res => {
        this.setState({
          UserDetailVisible: true,
          record,
          roles: res.list,
        });
      },
    });
  }

  closeUserDetail() {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState({
      UserDetailVisible: false,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetUserList',
      payload: formValues,
    });
  }

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:视图
   */

  render() {
    const {
      authority: { userData },
    } = this.props;
    const { listLoading, selectedRows, UserDetailVisible, record, roles } = this.state;
    const listData = {
      list: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 1,
      },
    };
    if (userData.code === 1 && userData.list !== undefined) {
      listData.list = userData.list;
      listData.pagination = {
        current: userData.pagination.current,
        pageSize: userData.pagination.pageSize,
        total: userData.pagination.total,
      };
    }
    return (
      <PageHeaderWrapper title="用户列表">
        <Card bordered={false}>
          <StandardTable
            selectedRows={selectedRows}
            loading={listLoading}
            data={listData}
            columns={this.columns}
            onChange={this.handleStandardTableChange}
            rowKey="id"
            scroll={{ x: 'auto' }}
          />
        </Card>
        {UserDetailVisible ? (
          <UserDetail
            record={record}
            roles={roles}
            closeUserDetail={this.closeUserDetail.bind(this)}
          />
        ) : null}
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetUserList',
      payload: formValues,
    });
  }

  componentWillUnmount() {}
}

export default UserList;
